<template>
<div id="login">
    <div id="fromBox">
        <h1>login</h1>
        <div class="inputBox">
            <input type="text" required name="username" v-model="loginInfo.username" maxlength="16" @keyup.enter="inoutEnter" ref="username"/>
            <label for="username">用户名</label>
        </div>
        <div class="inputBox">
            <input type="password" required name="password" v-model="loginInfo.password" maxlength="16" @keyup.enter="inoutEnter" ref="password"/>
            <label for="password">密码</label>
            <span id="tips">超级管理员-用户名：admin，密码：123546</span><br>
            <span id="tips">普通管理员-用户名：editor，密码：123546</span>  
        </div>
        <el-button type="primary" style="width: 100px; height: 46px; font-size: 16px; margin-top: 20px;" @click="loginFun">登陆</el-button>
    </div>
</div>
</template>

<script>
import userApi from '../../api/user'
import { ElMessage } from 'element-plus'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { defineComponent, reactive, toRefs, onBeforeMount, onMounted, getCurrentInstance } from 'vue'
export default defineComponent({
    name: '',
    setup() {
        const { proxy } = getCurrentInstance()
        const store = useStore()
        const router = useRouter()
        const methods = {
            inoutEnter(){
                if(!data.loginInfo.username){
                    proxy.$refs.username.focus()
                }else if((!data.loginInfo.password)){
                    proxy.$refs.password.focus()
                }else{
                    methods.loginFun()
                }
            },
            loginFun(){
                userApi.UserEdit.login(data.loginInfo).then((res)=>{
                    if(res.code === 200){
                        ElMessage({
                            message: '登陆成功',
                            type: 'success'
                        })
                        store.commit('user/userifo_Grade', res.Grade)
                        store.commit('user/ISLOGIN', true)
                        router.push({ path: '/home' })
                    }else{
                        ElMessage({
                            message: res.message,
                            type: 'error'
                        })
                    }
                })
            },
        }
        const data = reactive({
            loginInfo:{
                username:'admin',
                password:'123456'
            },
        })
        onBeforeMount(() => {
            // 组件挂载页面之前执行
        })
        onMounted(() => {
            // 组件挂载到页面之后执行
        })
        return {
            ...toRefs(data),
            ...methods
        }
    },
})
</script>

<style scoped>
#login{
    width: 100%;
    height: 100%;
    position: relative;
    background-position: center center;
    background-size: cover;
    align-items: center;
    background-image:url(../../assets/images/wallhaven-ne3x7r.png);
}
#fromBox{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 520px;
    height: 320px;
    padding: 10px;
    background: rgba(178 190 195 / 3%);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-radius: 15px;
    border: 1px solid rgb(255 255 255 / 3%);
    box-shadow: 10px 10px 30px 10px rgb(0 0 0 / 10%);
    display: flex;
    flex-direction: column;
    align-items: center;
}
#fromBox>h1{
    background: -webkit-linear-gradient(315deg,#30cfd0 25%,#00a8ff);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 40px;
    line-height: 50px;
    margin: 15px 0 10px 0;
}
.inputBox{
    width: 380px;
    height: 80px;
    position: relative;
}
.inputBox input {
	outline: none;
	border: none;
	width: 100%;
	padding: 10px 0;
	margin-bottom: 6px;
	color: #fff;
	font-size: 16px;
	border-bottom: 1px solid #00a8ff;
	background-color: transparent;
}
.inputBox input:focus{
    animation: TheNeonLights 2s;
}
@keyframes TheNeonLights {
    0%{
        border-image: linear-gradient(90deg, #30cfd0 0%, #00a8ff 100%) 1;
    }
    50%{
        border-image: linear-gradient(270deg, #30cfd0 0%, #00a8ff 100%) 1;
    }
    100%{
        border-image: linear-gradient(270deg, #00a8ff 0%, #00a8ff 100%) 1;
    }
}
.inputBox label {
	position: absolute;
	top: -2px;
	left: 0;
	padding: 10px 0;
	color: #fff;
	pointer-events: none;
    font-size: 16px;
	transition: all 0.5s;
}
.inputBox input:focus + label,
.inputBox input:valid + label {
	top: -24px;
	color: #00a8ff;
	font-size: 12px;
}
#tips{
    font-size: 12px;
    color: #b2bec3;
}
</style>